.navBar {
  width: 100%;
  height: 350px;
  font-size: 18px;
  background-image: url('../../../assets/image/header.jpg');
  background-repeat: no-repeat;

  .container {
    height: 136px;
    display: flex;
    justify-content: space-between;

    .navBar-header {
      flex-basis: 30%;
      text-align: center;

      .navBar-brand img {
        height: 80px;
      }
    }

    .navBar-header::before {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }

    .navBar-collapse {
      flex-basis: 25%;      /* 只有1个菜单时用20%, 多个时用40% */
      display: flex;

      .nav {
        flex-basis: 20%;
        text-align: center;
        cursor: pointer;
        color: #fff;
      }

      /*.clickNav {
        background: #034ea2;
        color: white;
        font-weight: bold;
      }*/

      //利用伪元素文字垂直居中
      .nav::before {
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle;
      }
    }
  }
}


/*
@media screen and (max-width: 1366px) {
  .navBar {
    height: 86px;

    .container {
      .navBar-header {
        .navBar-brand img {
          height: 56px;
        }
      }
    }
  }
}
*/

@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .navBar {
    zoom: 1;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .navBar {
    zoom: 0.7;
  }
}

@media screen and (max-width: 1280px) {
  .navBar {
    zoom: 0.67;
  }
}
